<style>
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    div[lay-id='storageSingleInventoryInoutTable']{
        display: none;
    }

    .single-inventory-list{
        display: inline-flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .single-inventory-list .list-cell{
        width: 25%;
        padding: 8px;
        box-sizing: border-box;
    }
    .single-inventory-list .list-cell .list-item{
        border-radius: 5px;
        border: 1px solid #ECECEC;
    }
    .single-inventory-list .list-cell .list-top{
        height: 40px;
        padding: 0 15px;
        background: rgba(0,156,94,0.06);
        border-radius: 5px 5px 0 0;
    }
    .single-inventory-list .list-cell .list-top .sku-name{
        font-weight: 600;
    }
    .single-inventory-list .list-cell .list-top .space{
        flex-shrink: 0;
        padding-left: 10px;
    }
    .single-inventory-list .list-ct{
        display: flex;
        padding: 15px 15px 5px;
    }
    .single-inventory-list .list-ct .list-icon{
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    .single-inventory-list .list-ct .list-icon img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .single-inventory-list .list-ct .list-txt{
        padding-left: 14px;
        flex: 1;
    }
    .single-inventory-list .list-ct .list-txt .sku-code{
        font-weight: 600;
        line-height: 18px;
        margin-bottom: 2px;
    }
    .single-inventory-list .list-ct .list-txt .label{
        padding-top: 2px;
        line-height: 18px;
    }
    .single-inventory-list .list-btm{
        padding: 0 15px;
    }
    .single-inventory-list .list-btm .nape-cell {
        line-height: 18px;
        padding-top: 10px;
    }
    .single-inventory-list .list-btn{
        padding: 15px 8px;
    }
    .single-inventory-list .list-btn .btn-cell{
        padding: 0 7px;
        flex: 1;
    }
    .single-inventory-list .list-btn .btn-cell span{font-size: 10px}
    .single-inventory-list .list-btn .btn-cell .layui-btn{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .single-inventory-list .list-btn .btn-cell .layui-btn.details{
        background-color: #FFFFFF !important;
        color: #333;
        border: 1px solid #009C5E;
    }
    .single-inventory-list .row-between{
        justify-content: space-between;
    }
    .single-inventory-list .flex-ct{
        display: flex;
        align-items: center;
    }
    .single-inventory-list .label{
        color: #999;
    }
    .single-inventory-list .line-1{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt" style="width: 56%;">
                                <!--
                            <div class="query-lt" style="width: calc(82% - 160px)">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">刀柜类型：</label>
                                    <div class="layui-inline">
                                        <select name="productType" lay-filter="productType" lay-search lay-verify="">
                                            <option value=""> 请选刀柜类型</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">刀柜品牌：</label>
                                    <div class="layui-inline">
                                        <select name="productBrandId" lay-filter="productBrandId" lay-search
                                                lay-verify="">
                                            <option value="">请选刀柜品牌</option>
                                        </select>
                                    </div>
                                </div>
                                -->
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">柜子编号：</label>
                                    <div class="layui-input-inline">
                                        <select  name="cabCode" lay-filter="cabCode"  lay-search lay-verify="" class="common-select-search">
                                            <option value="">请选择柜子</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="请输入物料编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">规格码：</label>
                                    <div class="layui-input-inline">
                                        <input name="oldSpecCode" class="layui-input" type="text" placeholder="请输入规格码" autocomplete="off"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <div class="viewNav" id="viewNav">
                                        <div class="viewNavGraphics active"><img src="assets/images/navgraphics1.png">图文</div>
                                        <div class="viewNavList"><img src="assets/images/navlist.png">列表</div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                    <button id="cabinetExport" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="storageSingleInventoryInoutTable" lay-filter="storageSingleInventoryInoutTable"></table>
            <div class="viewNavMain" id="viewNavMain">
                <div class="viewNavBox">
                    <div class="single-inventory-list" id="viewNavBox"></div>
                </div>
                <div id="viewNavPage" style="text-align: right;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="storageInventoryInoutTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="inventorySpace">库存分布</a>
    <!--
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    -->
</script>

<!--图文模板-->
<script type="text/html" id="storageSingleProductImgTemplate">
    {{# layui.each(d, function(index, item){ }}
    <div class="list-cell">
        <div class="list-item">
            <div class="list-top flex-ct row-between">
                <div class="sku-name line-1">柜子编号：{{item.cabCode}}</div>
                <div class="space"><label class="label">柜子数量：</label><span>{{item.cabNum}}</span></div>
            </div>
            <div class="list-ct">
                <div class="list-icon">
                    <img src="{{item.skuPic || 'assets/images/default-icon.png'}}" alt="">
                </div>
                <div class="list-txt">
                    <div class="sku-code line-1">{{item.skuName}}</div>
                    <div class="label line-1">编码：{{item.skuCode}}</div>
                    <div class="label line-1">规格：{{item.skuSpecOld}}</div>
                    <div class="label">品牌：{{item.productBrandName}}</div>
                </div>
            </div>
            <div class="list-btm">
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">上新数量：</label><span>{{item.quantityNew}}{{item.basicsUnitName}}</span></div>
                    <div class="nape-item"><label class="label">暂存数量：</label><span>{{item.quantityTemp}}{{item.basicsUnitName}}</span></div>
                </div>
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">报修数量：</label><span>{{item.quantityRepair}}{{item.basicsUnitName}}</span></div>
                    <div class="nape-item"><label class="label">报废数量：</label><span>{{item.quantityRecycle}}{{item.basicsUnitName}}</span></div>
                </div>
            </div>
            <div class="list-btn flex-ct">
                <div class="btn-cell">
                    <button class="layui-btn details" data-code="{{item.skuCode}}" data-cab="{{item.cabCode}}">详情</button>
                </div>
                <div class="btn-cell">
                    <button class="layui-btn inventorySpace" data-code="{{item.skuCode}}" data-cab="{{item.cabCode}}">
                        库存分布<span>(货位数量：{{item.spaceNum}})</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{# }); }}
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="storageInventoryInoutForm">
    <form lay-filter="storageInventoryInoutForm" class="layui-form model-form">
        <input name="id" type="hidden"/>

        <div class="layui-form-item">
            <label class="layui-form-label">柜子编号</label>
            <div class="layui-input-block">
                <input name="cabCode" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">物料图片</label>
            <div class="layui-input-block">
                <img id="skuPic" src="" style="max-height: 80px; max-width: 500px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物料名称</label>
            <div class="layui-input-block">
                <input name="skuName" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">物料编号</label>
            <div class="layui-input-block">
                <input name="skuCode" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <input name="productBrandName" placeholder="" type="text" class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">暂存数量</label>
            <div class="layui-input-block">
                <input name="quantityTemp" placeholder="" type="text" class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">报修数量</label>
            <div class="layui-input-block">
                <input name="quantityRepair" placeholder="" type="text" class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">报废数量</label>
            <div class="layui-input-block">
                <input name="quantityRecycle" placeholder="" type="text" class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">柜子数</label>
            <div class="layui-input-block">
                <input name="cabNum" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">货位数</label>
            <div class="layui-input-block">
                <input name="spaceNum" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-block">
                <input name="basicsUnitName" placeholder="" type="text" class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>

    </form>
</script>

<script type="text/html" id="inventorySpaceTab">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 头部操作栏 -->
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">货位编号：</label>
                            <div class="layui-input-inline mr0">
                                <input name="spaceCode" class="layui-input" type="text" placeholder="请输入货位编号"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">存入类型：</label>
                            <div class="layui-input-inline">
                                <select name="businessType">
                                    <option value="">请选择存入类型</option>
                                    <option value="temp">暂存</option>
                                    <option value="repair">报修</option>
                                    <option value="recycle">回收</option>
                                    <option value="exhibit">格子柜上货</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn" lay-filter="formSubSearchLogDtl" lay-submit layui-form-keyDownSearch="true">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 表格 -->
                <table class="layui-table" id="inventorySpaceTable" lay-filter="inventorySpaceTable"></table>
            </div>
        </div>
    </div>

</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laypage', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        let laypage = layui.laypage;
        let viewNavPageCount = 0, listText = 1; //viewNavPageCount(图文状态下的页码)  listText(区分图文视图1 和 列表视图0)
        let singleInventoryProductList = [];

        admin.selectSearch();

        // 渲染表格
        var insTb = table.render({
            elem: '#storageSingleInventoryInoutTable',
            url: config.base + 'enterprisecab/cabinet/admin/storageSingleInventoryProduct/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                , {field: 'skuName', sort: true, title: '物料名称', fixed: 'left', width: 160}
                , {field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                , {field: 'skuSpecOld', sort: true, title: '规格码', fixed: 'left', width: 160}
                , {field: 'productBrandName', sort: true, title: '品牌'}
                , {field: 'cabCode', sort: true, title: '柜子编号', width: 130}
                ,{field: 'quantityNew', sort: true, title: '上新数量(包装计)', width: 150,templet: (d)=> {
                        return d.quantityNew + d.unitName
                    }}
                ,{field: 'quantityTemp', sort: true, title: '暂存数量(包装计)', width: 150,templet: (d)=> {
                        if(d.quantityTemp<0){
                            return d.quantityTemp*-1 + d.unitName;
                        }
                        return d.quantityTemp + d.unitName
                    }}
                ,{field: 'quantityRepair', sort: true, title: '报修数量(包装计)', width: 150, templet: (d)=> {
                        return d.quantityRepair + d.unitName
                    }}
                ,{field: 'quantityRecycle', sort: true, title: '报废数量(包装计)', width: 150,templet: (d)=> {
                        return d.quantityRecycle + d.unitName
                    }}
                // , {field: 'workshopNum', sort: true, title: '分布车间数'}
                , {field: 'quantityPackNew', sort: true, title: '上新数量(基础单位计)', width: 180}
                , {field: 'quantityPackTemp', sort: true, title: '暂存数量(基础单位计)', width: 180}
                , {field: 'quantityPackRepair', sort: true, title: '报修数量(基础单位计)', width: 180}
                , {field: 'quantityPackRecycle', sort: true, title: '报废数量(基础单位计)', width: 180}
                , {field: 'basicsUnitName', sort: true, title: '基础单位', templet: d=> d.basicsUnitName ? d.basicsUnitName : '无'}
                , {field: 'cabNum', sort: true, title: '柜子数量'}
                , {field: 'spaceNum', sort: true, title: '货位数量'}
                // , {field: 'status', sort: true, title: '库存状态', templet: function (d) {
                //         return '';
                //     }
                // }
                // ,{field: 'no', sort: true, title: 'no'}
                // ,{field: 'day', sort: true, title: 'day'}
                // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                // ,{field: 'statusDesc', sort: true, title: '状态'}
                // ,{field: 'checkTime', sort: true, title: '盘验时间'}
                // ,{field: 'checkUserId', sort: true, title: '盘验人id'}
                // ,{field: 'checkUserName', sort: true, title: '盘验人'}
                // ,{field: 'notifyTime', sort: true, title: '通知时间'}
                // ,{field: 'notifyUserId', sort: true, title: '通知人'}
                // ,{field: 'notifyUserName', sort: true, title: '通知人'}
                // ,{field: 'takeUserId', sort: true, title: '回收人id'}
                // ,{field: 'takeUserName', sort: true, title: '回收人'}
                // ,{field: 'takeTime', sort: true, title: '回收时间'}
                // ,{field: 'inoutId', sort: true, title: '暂存柜存刀id'}
                // ,{field: 'cabId', sort: true, title: '柜子id'}
                // ,{field: 'skuId', sort: true, title: 'sku id'}
                // ,{field: 'companyId', sort: true, title: '企业id'}
                // ,{field: 'spaceId', sort: true, title: '货道id'}
                // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                // ,{field: 'quantityCurrent', sort: true, title: '当前库存'}
                // ,{field: 'quantityAfter', sort: true, title: '变动后库存'}

                , {align: 'center', toolbar: '#storageInventoryInoutTableBar', title: '操作', width: 180,fixed: 'right'}
            ]],
        });

        // 工具条点击事件
        table.on('tool(storageSingleInventoryInoutTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            } else if (obj.event == 'detail') {
                showEditModel(data);
            } else if (obj.event == 'inventorySpace') {
                showInventorySpaceModel(data)
            }
        });


        //监听排序
        table.on('sort(storageSingleInventoryInoutTable)', function (obj) {
            table.reload('storageSingleInventoryInoutTable', {
                initSort: obj
                , where: {
                    sort: obj.field
                    , order: obj.type
                }
            });
            $('[lay-id="storageSingleInventoryInoutTable"]').show();
        });

        $('#viewNav .viewNavGraphics ').click(function () {
            listText = 1;
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navgraphics1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navlist.png');
            $('[lay-id="storageSingleInventoryInoutTable"]').hide();
            $('#viewNavMain').show();
        });

        $('#viewNav .viewNavList ').click(function () {
            listText = 0;
            $('[lay-id="storageSingleInventoryInoutTable"]').show();
            // 显示表格需重绘表格尺寸
            table.resize("storageSingleInventoryInoutTable");
            $('#viewNavMain').hide();
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navlist1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navgraphics.png');
        });

        function viewNavBox(data) {
            layer.load(2);
            $('#viewNavBox').html('');
            if (!data || data.length <= 0) {
                $('#viewNavBox').html('');
                $('#viewNavPage').hide();
                $('#viewNavBox').html("<h3 style='text-align: center;line-height: 100px;flex: 1'>暂无内容~~~</h3>");
            }else {
                laytpl(storageSingleProductImgTemplate.innerHTML).render(data, function (html) {
                    $('#viewNavBox').html(html);
                });
                $('#viewNavPage').show();
            }
            layer.closeAll();
        }

        $('#viewNavBox').delegate('.details', 'click', function () {
            let code = $(this).attr('data-code') + $(this).attr('data-cab');
            let filterList = singleInventoryProductList.filter(item => {
                let flag = item.skuCode + item.cabCode
                return code == flag
            })
            showEditModel(filterList[0])
        });
        $('#viewNavBox').delegate('.inventorySpace', 'click', function () {
            let code = $(this).attr('data-code') + $(this).attr('data-cab');
            let filterList = singleInventoryProductList.filter(item => {
                let flag = item.skuCode + item.cabCode
                return code == flag
            })
            showInventorySpaceModel(filterList[0])
        });

        admin.reqSync('enterprisecab/cabinet/admin/storageSingleInventoryProduct/list', {page: 1, limit: 12}, res => {
            if (res.code === 200) {
                viewNavPageCount = res.count;
                singleInventoryProductList = res.data;
                viewNavBox(res.data);
                viewNavPageFn()
            }
        }, 'get');

        function viewNavPageFn(_condition) {
            laypage.render({
                elem: 'viewNavPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: viewNavPageCount //数据总数，从服务端得到
                , limit: 12
                , jump: function (obj, first) {
                    if (!first) {
                        let condition = _condition ? $.extend(_condition, {
                            page: obj.curr,
                            limit: obj.limit
                        }) : {page: obj.curr, limit: obj.limit};
                        admin.req('enterprisecab/cabinet/admin/storageSingleInventoryProduct/list', condition, res => {
                            if (res.code === 200) {
                                singleInventoryProductList = res.data;
                                viewNavBox(res.data);
                            }
                        }, 'get');
                    }
                }
            });
        }

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            if (listText == 0) {
                insTb.reload({where: data.field, page: {curr: 1}}, 'data');
                $('[lay-id="storageSingleInventoryInoutTable"]').show();
            } else {
                admin.reqSync('enterprisecab/cabinet/admin/storageSingleInventoryProduct/list', $.extend(data.field, {
                    page: 1,
                    limit: 12
                }), res => {
                    if (res.code === 200) {
                        singleInventoryProductList = res.data;
                        viewNavPageCount = res.count;
                        viewNavBox(res.data);
                        viewNavPageFn(data.field)
                    }
                }, 'get');
            }
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            var field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            if (listText == 0) {
                insTb.reload({where: field, page: {curr: 1}}, 'data');
                $('[lay-id="storageSingleInventoryInoutTable"]').show();
            } else {
                admin.reqSync('enterprisecab/cabinet/admin/storageSingleInventoryProduct/list', {
                    page: 1,
                    limit: 12
                }, res => {
                    if (res.code === 200) {
                        singleInventoryProductList = res.data;
                        viewNavPageCount = res.count;
                        viewNavBox(res.data);
                        viewNavPageFn(field)
                    }
                }, 'get');
            }
        });


        admin.req('enterprisecab/cabProduct/admin/productType/list', {type: 'cabnet', limit: 999}, function (res) {
            if (200 == res.code) {
                var optionHtml = '<option value=""> 请选择柜子类型</option>';
                for (var k = 0; k < res.data.length; k++) {
                    optionHtml += '<option value="' + res.data[k].id + '">' + res.data[k].name + '</option>';
                }
                $("select[name='productType']").html(optionHtml);
                form.render('select')
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000});
            }
        }, 'GET');

        admin.req('enterprisecab/cabProduct/admin/productBrand/list', {limit: 999}, function (res) {
            if (200 == res.code) {
                var optionHtml = '<option value=""> 请选择柜子品牌</option>';
                for (var k = 0; k < res.data.length; k++) {
                    optionHtml += '<option value="' + res.data[k].id + '">' + res.data[k].name + '</option>';
                }
                $("select[name='productBrandId']").html(optionHtml);
                form.render('select')
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000});
            }
        }, 'GET');

        admin.req('enterprisecab/cabinet/admin/cabinet/list', {limit:999,cabinetNature:'live'}, function (res) {
            if (200 == res.code) {
                var optionHtml='<option value=""> 请选择柜子</option>';
                for (var k = 0; k < res.data.length; k++) {
                    optionHtml+='<option value="'+res.data[k].code+'">'+res.data[k].code+'</option>';
                }
                $("select[name='cabCode']").html(optionHtml);
                form.render('select')
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000});
            }
        }, 'GET');

        form.render('select');

        // 添加按钮点击事件
        $('#storageInventoryInoutBtnAdd').click(function () {
            showEditModel();
        });

        function showInventorySpaceModel(data) {
            admin.open({
                type: 1,
                area: '1280px',
                offset: '65px',
                title: '库存分布',
                content: $('#inventorySpaceTab').html(),
                success: function () {
                    getInventorySpace(data);

                }
            })
        }

        function getInventorySpace(data) {
            // 渲染表格
            form.render('select');
            var insTb = table.render({
                elem: '#inventorySpaceTable',
                url: config.base + 'enterprisecab/cabinet/admin/storageInventorySpace/detasList?cabCode4Detail=' + data.cabCode + '&skuCode4Detail=' + data.skuCode,
                page: true,
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers', title: '序号', fixed: 'left'}
                    , {field: 'skuName', sort: true, title: '物料名称', fixed: 'left', width: 160}
                    , {field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                    , {field: 'skuSpecOld', sort: true, title: '规格码', fixed: 'left', width: 160}
                    , {field: 'productBrandName', sort: true, title: '品牌'}
                    , {field: 'cabCode', sort: true, title: '柜子编号'}
                    , {field: 'cabName', sort: true, title: '柜子名称'}
                    , {field: 'spaceCode', sort: true, title: '货位编号'}
                    , {
                        field: 'businessType', sort: true, title: '存入类型', templet: function (d) {
                            if (d.businessType == 'temp') {
                                return '暂存';
                            } else if (d.businessType == 'repair') {
                                return '报修'
                            } else if (d.businessType == 'recycle') {
                                return '报废'
                            } else if (d.businessType == 'exhibit'){
                                return '上新';
                            }
                        }
                    }
                    ,{field: 'quantity', sort: true, title: '库存(基础单位计)', width: 150, templet: (d)=> {
                            return d.quantity + d.basicsUnitName
                        }}
                    , {field: 'quantityMax', sort: true, title: '货位容量'}
                    , {field: 'checkStatusDesc', sort: true, title: '盘验状态'}
                    // ,{field: 'unitName', sort: true, title: '单位'}
                    // , {
                    //     field: 'status', sort: true, title: '盘验状态', templet: function (d) {
                    //         if (d.status == 'created') {
                    //             return '待盘验'
                    //         }
                    //         return '已盘验'
                    //     }
                    // }
                    // ,{field: 'no', sort: true, title: 'no'}
                    // ,{field: 'day', sort: true, title: 'day'}
                    // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                    // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                    // ,{field: 'statusDesc', sort: true, title: '状态'}
                    // ,{field: 'checkTime', sort: true, title: '盘验时间'}
                    // ,{field: 'checkUserId', sort: true, title: '盘验人id'}
                    // ,{field: 'checkUserName', sort: true, title: '盘验人'}
                    // ,{field: 'notifyTime', sort: true, title: '通知时间'}
                    // ,{field: 'notifyUserId', sort: true, title: '通知人'}
                    // ,{field: 'notifyUserName', sort: true, title: '通知人'}
                    // ,{field: 'takeUserId', sort: true, title: '回收人id'}
                    // ,{field: 'takeUserName', sort: true, title: '回收人'}
                    // ,{field: 'takeTime', sort: true, title: '回收时间'}
                    // ,{field: 'inoutId', sort: true, title: '暂存柜存刀id'}
                    // ,{field: 'cabId', sort: true, title: '柜子id'}
                    // ,{field: 'skuId', sort: true, title: 'sku id'}
                    // ,{field: 'companyId', sort: true, title: '企业id'}
                    // ,{field: 'spaceId', sort: true, title: '货道id'}
                    // ,{field: 'operationTypeDesc', sort: true, title: '操作类型'}
                    // ,{field: 'businessTypeDesc', sort: true, title: '业务类型'}
                    // ,{field: 'quantityCurrent', sort: true, title: '当前库存'}
                    // ,{field: 'quantityAfter', sort: true, title: '变动后库存'}

                    // ,{align: 'center', toolbar: '#storageInventoryInoutTableBar', title: '操作', width: 200}
                ]],
            });

            // 工具条点击事件
            table.on('tool(inventorySpaceTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') { //修改
                    showEditModel(data);
                } else if (obj.event === 'del') { // 删除
                    doDelete(obj);
                }
            });

            //监听排序
            table.on('sort(inventorySpaceTable)', function (obj) {
                table.reload('inventorySpaceTable', {
                    initSort: obj
                    , where: {
                        sort: obj.field
                        , order: obj.type
                    }
                });
            });

            // 搜索
            form.on('submit(formSubSearchLogDtl)', function (data) {
                insTb.reload({where: data.field, page: {curr: 1}}, 'data');
            });
        }

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '880px',
                offset: '65px',
                title: '详情',
                content: $('#storageInventoryInoutForm').html(),
                success: function () {
                    if (data) {
                        var option = $("form select[name='operationType']").find("option");
                        layui.each(option, function (index, item) {
                            if (data.operationType == item.text) {
                                data.operationType = item.value;
                            }
                        });
                    }

                    if (data) {
                        var option = $("form select[name='businessType']").find("option");
                        layui.each(option, function (index, item) {
                            if (data.businessType == item.text) {
                                data.businessType = item.value;
                            }
                        });
                    }

                    if (data) {
                        var option = $("form select[name='status']").find("option");
                        layui.each(option, function (index, item) {
                            if (data.status == item.text) {
                                data.status = item.value;
                            }
                        });
                    }

                    $(".model-form input").css("border", "none")
                    $(".model-form input").attr('readonly', true);
                    $('#skuPic').attr('src', data.skuPic);
                    form.val('storageInventoryInoutForm', data);
                    // 表单提交事件
                    form.on('submit(storageInventoryInoutFormSubmit)', function (d) {
                        layer.load(2);
                        admin.req(data ? 'enterprisecab/cabinet/admin/storageInventoryInout/update' : 'enterprisecab/cabinet/admin/storageInventoryInout/add', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('storageSingleInventoryInoutTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');
                        return false;
                    });
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/cabinet/admin/storageInventoryInout/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 导出
        $('#cabinetExport').click(function () {

            location.href = config.base + 'enterprisecab/cabinet/admin/storageSingleInventoryProduct/export?enterpriseCode=' + config.getUser().enterpriseCode;

        });

    });
</script>